<template>
	<view v-if="isShow">
		<page-container :show="isShow"  position="center" :overlay="false" @beforeleave="onBeforeLeave">
			<view class="page-content">
				<view class="result">
					<u-navbar ref="navbarRef" class="van-nav-bar" :placeholder="true" title="测评报告" @leftClick="back"
						:autoBack="false"></u-navbar>
					<view class="wrapp" :style="{ height: domHeight }">
						<view class="bg"></view>
						<view class="wrap">
							<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false"
								:show-scrollbar="false">
								<!-- 	<view class="head">
	        					<view>{{ resultObj.appraisalName }}报告</view>
	        					<view>测试时间：{{ resultObj.appraisalBeginDate }}</view>
	        				</view> -->
								<!-- 					<view class="score">
	        					<view>您的测评得分</view>
	        					<view></view>
	        					<view>{{ resultObj.appraisalScore }}</view>
	        				</view> -->
								<view class="result-little">
									<view>测评结果分析</view>
									<view></view>
									<view>
										<scl90-vue ref="scl90Ref" :resultObj="resultObj"
											v-if="appraisalId == 8"></scl90-vue>
										<anxiety-self-assessment ref="anxietyRef" :resultObj="resultObj"
											v-if="appraisalId == 7"></anxiety-self-assessment>
										<burnout ref="burnoutRef" :resultObj="resultObj" v-if="appraisalId == 1">
										</burnout>
										<careerInterest ref="careerRef" :resultObj="resultObj" v-if="appraisalId == 5">
										</careerInterest>
										<childRelationshipAssessment ref="AssessmentRef" :resultObj="resultObj"
											v-if="appraisalId == 10"></childRelationshipAssessment>
										<childRelationshipDiagnosis ref="DiagnosisRef" :resultObj="resultObj"
											v-if="appraisalId == 4"></childRelationshipDiagnosis>
										<depressionSelfAssessment ref="depressionRef" :resultObj="resultObj"
											v-if="appraisalId == 2"></depressionSelfAssessment>
										<maritalQuality ref="maritalRef" :resultObj="resultObj" v-if="appraisalId == 9">
										</maritalQuality>
										<perceivedStress ref="stressRef" :resultObj="resultObj" v-if="appraisalId == 6">
										</perceivedStress>
										<socialSupportRatingScale ref="socialSupportRef" v-if="appraisalId == 3"
											:resultObj="resultObj"></socialSupportRatingScale>
									</view>
								</view>
							</scroll-view>
							<view style="height: 166rpx;"></view>
							<view class="notice-mask">
								<button class="notice-btn" @tap="goBack">返回首页</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</page-container>
	</view>

</template>

<script>
	import {
		getUserAppraisalResult
	} from '@/api/evaluate/index.js';
	import scl90Vue from './cnps/scl90.vue'; //8
	import anxietySelfAssessment from './cnps/anxietySelfAssessment.vue'; //焦虑自我评估7
	import burnout from './cnps/burnout.vue'; //职业倦怠1
	import careerInterest from './cnps/careerInterest.vue'; //霍兰德职业兴趣5
	import childRelationshipAssessment from './cnps/childRelationshipAssessment.vue'; //亲子关系诊断10
	import childRelationshipDiagnosis from './cnps/childRelationshipDiagnosis.vue'; //亲子关系评估4
	import depressionSelfAssessment from './cnps/depressionSelfAssessment.vue'; //抑郁自我评估2
	import maritalQuality from './cnps/maritalQuality.vue'; //婚姻9
	import perceivedStress from './cnps/perceivedStress.vue'; //知觉压力6
	import socialSupportRatingScale from './cnps/socialSupportRatingScale.vue'; //社会支持评分量表3
	export default {
		data() {
			return {
				domHeight: '',
				detailId: '',
				resultObj: {},
				lastValidStack: [],
				fromPage: '',
				appraisalId: 8,
				isShow: true
			};
		},
		components: {
			scl90Vue,
			anxietySelfAssessment,
			burnout,
			careerInterest,
			childRelationshipAssessment,
			childRelationshipDiagnosis,
			depressionSelfAssessment,
			maritalQuality,
			perceivedStress,
			socialSupportRatingScale
		},
		onLoad(options) {
			this.appraisalId = options.appraisalId;
			this.detailId = options.id;

			this.$nextTick(() => {
				if (this.$refs.stressRef) {
					this.$refs.stressRef.getDetail(this.detailId);
				}
				if (this.$refs.scl90Ref) {
					this.$refs.scl90Ref.getDetail(this.detailId);
				}
				if (this.$refs.maritalRef) {
					this.$refs.maritalRef.getDetail(this.detailId);
				}
				if (this.$refs.anxietyRef) {
					this.$refs.anxietyRef.getDetail(this.detailId);
				}
				if (this.$refs.burnoutRef) {
					this.$refs.burnoutRef.getDetail(this.detailId);
				}
				if (this.$refs.careerRef) {
					this.$refs.careerRef.getDetail(this.detailId);
				}
				if (this.$refs.AssessmentRef) {
					this.$refs.AssessmentRef.getDetail(this.detailId);
				}
				if (this.$refs.DiagnosisRef) {
					this.$refs.DiagnosisRef.getDetail(this.detailId);
				}
				if (this.$refs.depressionRef) {
					this.$refs.depressionRef.getDetail(this.detailId);
				}
				if (this.$refs.socialSupportRef) {
					this.$refs.socialSupportRef.getDetail(this.detailId);
				}
			});

			// getUserAppraisalResult({
			// 	appraisalId: options.id,
			// 	userId: uni.getStorageSync('user_id')
			// }).then((res) => {
			// 	// console.log(res);
			// 	this.resultObj = res.data;
			// 	this.appraisalId = res.data.appraisalId
			// });

			// getUserAppraisal().then(res=>{

			// })

			// console.log(getSystemInfo());

			const pages = getCurrentPages();
			if (pages.length > 1) {
				const prevPage = pages[pages.length - 2];
				this.fromPage = prevPage.route;
			}
		},
		methods: {
			onBeforeLeave() {
				this.isShow = false;
				// uni.showModal({
				// 	title: '确认返回',
				// 	success: (res) => {
				// 		if (res.confirm) uni.navigateBack();
				// 		else this.isShow = true;
				// 	}
				// });
				uni.switchTab({
					url:'/pages/index'
				})
			},
			back() {
				// let justQuestion = uni.getStorageSync('justQuestion')
				// if (justQuestion) {
				// 	uni.navigateBack({
				// 		delta: 3
				// 	});
				// } else {
				// 	uni.navigateBack({
				// 		delta: 2
				// 	});
				// }
				uni.switchTab({
					url:'/pages/index'
				})
			},
			goBack() {
				uni.switchTab({
					url:'/pages/index'
				})
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 20;
			// 示例计算公式（具体需根据组件实现调整）
			const height = statusBarHeight + 44 + 'px'; // 状态栏高度 + 导航栏内容高度
			this.domHeight = `calc(100% - ${height})`;
		}
	};
</script>

<style scoped lang="scss">
	page-container {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 999;
	  background-color: transparent;
	}
	 
	.page-content {
	  width: 100%;
	  height: 100%;
	  background: white;
	  border-radius: 16rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.result {
		width: 100%;
		height: 100%;
		// background-color: #ebebeb;
		background: linear-gradient(10deg, rgba(126, 191, 254, 0) 0%, #accdff 23%, #f2d3f2 32%, #9fb3f2 44%, #e9e3f2 73%, #d9ecff 100%);

		.wrapp {
			position: relative;
		}

		.bg {
			width: 100%;
			height: 500rpx;
			position: absolute;
			left: 0;
			top: 0;
			// background: linear-gradient(117deg, #a9fdde 0%, #77b8fa 47%, #46add5 100%);
			border-radius: 0 0 80rpx 100rpx;
		}

		.wrap {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			.notice-mask {
				position: fixed;
				bottom: 0;
				left: 0;
				height: 166rpx;
				width: 100%;
				background-color: #fff;
				padding: 0 100rpx;
				display: flex;
				align-items: center;
				.notice-btn {
					background: linear-gradient(to right, #ff6b6b, #ff8e8e);
					color: #fff;
					border-radius: 50rpx;
					font-size: 32rpx;
					height: 80rpx;
					line-height: 80rpx;
					border: none;
					width: 50%;
					box-shadow: 0 5rpx 20rpx rgba(255, 107, 107, 0.3);
				}
				
			}
			.scrollWrap {
				height: calc(100% - 166rpx);
				width: 100%;
				padding-bottom: 30rpx;
				border-radius: 16rpx;
			}

			.head {
				width: 100%;
				height: 170rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-content: center;
				flex-wrap: wrap;

				>view:nth-child(1) {
					width: 100%;
					color: #fff;
					font-weight: bold;
					font-size: 40rpx;
					margin-bottom: 10rpx;
				}

				>view:nth-child(2) {
					width: 100%;
					color: #fff;
					font-size: 26rpx;
				}
			}

			.score {
				width: calc(100% - 60rpx);
				background-color: #fff;
				margin: auto;
				border-radius: 16rpx;
				position: relative;

				>view:nth-child(1) {
					width: 260rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					color: #000;
					background: linear-gradient(117deg, #a9fdde 0%, #77b8fa 47%, #46add5 100%);
					position: absolute;
					left: calc(50% - 130rpx);
					top: 0;
					border-radius: 0 0 10rpx 10rpx;
				}

				>view:nth-child(2) {
					width: 100%;
					height: 60rpx;
				}

				>view:last-child {
					width: 100%;
					padding: 30rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #000;
					text-align: center;
				}
			}

			.result-little {
				width: calc(100% - 60rpx);
				background-color: #fff;
				border-radius: 16rpx;
				margin: 40rpx auto 20rpx;
				position: relative;

				>view:nth-child(1) {
					width: 260rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 30rpx;
					color: #000;
					background: linear-gradient(117deg, #a9fdde 0%, #77b8fa 47%, #46add5 100%);
					position: absolute;
					left: calc(50% - 130rpx);
					top: 0;
					border-radius: 0 0 10rpx 10rpx;
				}

				>view:nth-child(2) {
					width: 100%;
					height: 60rpx;
				}

				>view:last-child {
					width: 100%;
					padding: 30rpx;
					box-sizing: border-box;
					font-size: 20rpx;

					::v-deep .wrap-con {
						>view {
							font-size: 26rpx;
							color: #1f1f1f;
							line-height: 45rpx;
						}
					}

					::v-deep .fontWeightStyle {
						font-weight: bolder;
					}

					::v-deep .textIndetStyle {
						text-indent: 2em;
					}

					::v-deep .say {
						color: rgb(255, 0, 0) !important;
						font-size: 34rpx !important;
						margin: 20rpx 0 30rpx 0 !important;
					}

				}
			}
		}
	}
</style>